<template>
  <div class="main">
    <div class="part">
      <div class="p-title">
        <div class="title">
          中心药房<MyToolTip
            content="中心药房是利用“医药福利管理（PBM）模式”技术收集处理签约用户药品需求，通过中心式仓储药房面向用户提供个体定制化分包、配送、药物管理等服务的新型药物流通体系。\n只有中心药房的创建者可查看管理该药房信息。"
          />
        </div>
      </div>
      <div class="btn-wrap fixR">
        <el-button type="primary" @click="addSupply">新增中心药房</el-button>
      </div>
      <div class="list">
        <div class="list-table">
          <el-table
            :data="warehousesData.list || []"
            style="width: 100%"
            stripe
            border
          >
            <!-- <el-table-column type="index" width="180" /> -->
            <!-- <el-table-column prop="id" label="id" /> -->
            <el-table-column prop="warehouseName" label="名称" />
            <el-table-column prop="address" label="地址" />
            <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="checkWarehouses(scope.row)"
                  >查看</el-button
                >
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="editRow(scope.row)"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="pagination">
        <myPagination
          :total="listNum || 0"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
          ref="myPaginationRef"
        />
      </div>
    </div>
    <!-- <el-dialog v-model="warehouseDialog" title="Tips">
      <el-row :gutter="20">
        <el-col :span="8" />
        <el-col :span="16" />
      </el-row>
    </el-dialog> -->
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { ref, onBeforeMount, onMounted, reactive, toRaw } from "vue";
import { getWarehousesList } from "@/api/supply";
import myPagination from "@/components/myPagination.vue";
import MyToolTip from "@/components/myToolTip.vue";
const warehousesData = ref({
  total: 0,
  list: []
});

const listNum = ref(0);
const myPaginationRef = ref();

async function initData() {
  const listRes = await getWarehousesList({
    skip:
      (myPaginationRef.value.currentPage - 1) *
      myPaginationRef.value.curPageSize,
    limit: myPaginationRef.value.curPageSize
  });
  warehousesData.value = listRes;
  if (myPaginationRef.value.currentPage === 1) {
    listNum.value = listRes.total;
  }
}

function sizeChange(curPageSize: number) {
  // console.log("index sizeChange curPageSize:", curPageSize);
  initData();
}
function currentChange(currentPage: number) {
  // console.log("index currentChange:", currentPage);
  initData();
}

const router = useRouter();

function addSupply() {
  router.push({
    path: "/supply/add",
    query: {
      type: "add"
    }
  });
}
function editRow(row) {
  router.push({
    path: "/supply/add",
    query: {
      type: "edit",
      id: row.id
    }
  });
}

function checkWarehouses(row) {
  router.push({
    path: "/supply/add",
    query: {
      type: "check",
      id: row.id
    }
  });
}

onMounted(() => {
  initData();
});
</script>
<style scoped lang="scss">
.main .part .p-title .title {
  display: flex;
  align-items: center;
}

.part {
  position: relative;
}

.fixR {
  position: absolute;
  top: 20px;
  right: 20px;
}

.list {
  position: relative;

  .list-table {
    margin-top: 20px;
  }
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>

<style>
.el-table .cell {
  padding: 0 12px;
}
</style>
